 <template>
  <a-layout id="components-layout-demo-responsive" class="bre-div-h100">
    <a-layout-sider
      breakpoint="lg"
      collapsed-width="0"
      style="z-index: 10; background: #fff"
      @collapse="onCollapse"
    >
      <!-- @breakpoint="onBreakpoint" -->
      <!-- <div class="logo" /> -->

      <!-- v-model:selectedKeys="selectedKeys2" -->
      <a-menu
        :selectedKeys="[$router.currentRoute.value.name]"
        mode="inline"
        v-model:openKeys="openKeys"
        style="height: 100%"
      >
        <template v-for="(item, index) in antMenu.navList">
          <a-sub-menu
            v-if="item.children && item.children.length > 1"
            :key="index"
          >
            <template #title>
              <span>{{ item.mate }}</span>
            </template>
            <a-menu-item v-for="child in item.children" :key="child.name">
              <router-link :to="{ name: child.name }">
                <span>{{ child.meta.title }}</span>
              </router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item v-else-if="!item.children" :key="item.name">
            <router-link :to="{ name: item.name }">
              <!-- <a-icon :type="item.type" /> -->
              <span>{{ item.meta.title }}</span>
            </router-link>
          </a-menu-item>
        </template>
        <!--  -->
        <a-menu-item >
           <a-popconfirm placement="right" ok-text="Yes" cancel-text="No" @confirm="OutLogin">
        <template #title>
         确定退出账户吗
        </template>
        <a-button block> 退出账户 </a-button>
      </a-popconfirm>
          
           </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <!-- <a-layout-header :style="{ background: '#fff', padding: 0 }" /> -->
      <a-layout-content :style="{ margin: '4px 4px 0' }">
        <div :style="{ background: '#fff', minHeight: '360px' }">
          <router-view class="bre-height100" />
        </div>
      </a-layout-content>
      <!-- <a-layout-footer  >
      Ant Design ©2018 Created by Ant UED 
      </a-layout-footer> -->
    </a-layout>
  </a-layout>
</template>
<script>
// import { UserOutlined, VideoCameraOutlined, UploadOutlined } from '@ant-design/icons-vue';
import nav from "@/adminCore/router/nav";
import { useRouter } from "vue-router";
import { reactive } from "vue";
import { useStore } from "vuex";
export default {
  data() {
    return {
      selectedKeys2: ["1"],
      openKeys: [""],
    };
  },
  components: {
    // UserOutlined,
    // VideoCameraOutlined,
    // UploadOutlined,
  },
  methods: {
    onCollapse(collapsed, type) {
      console.log(collapsed, type);
    },
    // onBreakpoint(broken) {
    //   console.log(broken);
    // },
  },

  setup() {
    const $router = useRouter();
    const $store = useStore();
    const antMenu = reactive({
      current: [$router.currentRoute.value.name],
      openKeys: ["sub2"], //默认组
      navList: nav.NewNav(),
      //  navStatus:,// 1默认 ，2 不存在的导航样式
    });
    function OutLogin() {
      $store.commit("outLogin");
      $router.replace("/");
    }
    return { antMenu, OutLogin };
  },
};
</script>

<style>
#components-layout-demo-responsive .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>
